<template>
  <el-dialog
    v-model="isShowDialog"
    :title="title"
    :draggable="draggable"
    :width="width + 'px'"
    align-center
    class="dialog"
    @open="onDialogOpen"
    @closed="onDialogColsed"
  >
    <slot></slot>
    <template v-if="btn.isShowBtn" #footer>
      <span class="dialog-footer">
        <el-button v-if="btn.isShowCancelBtn" @click="onCancel">取 消</el-button>
        <el-button type="primary" @click="onConfirm">{{ btn.confirmBtnText }}</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import { onMounted, reactive, ref } from 'vue';

type IBtn = {
  isShowBtn?: boolean;
  isShowCancelBtn?: boolean;
  confirmBtnText?: string;
};
interface Iprops {
  title: string;
  draggable?: boolean;
  width?: number;
  btn?: IBtn;
}
// const props = defineProps<Iprops>();
withDefaults(defineProps<Iprops>(), {
  title: '',
  draggable: true,
  width: 700,
  btn: () => {
    return {
      isShowBtn: true,
      isShowCancelBtn: true,
      confirmBtnText: '确 定',
    };
  },
});

const isShowDialog = ref<boolean>(false);
const emit = defineEmits(['onClickConfirmBtn', 'onClickCancelBtn', 'onDialogOpen', 'onDialogColsed']);

//点击确定
const onConfirm = () => {
  emit('onClickConfirmBtn');
};

//点击取消
const onCancel = () => {
  emit('onClickCancelBtn');
};

//监听弹窗开启
const onDialogOpen = () => {
  emit('onDialogOpen');
};

//监听弹窗关闭
const onDialogColsed = () => {
  emit('onDialogColsed');
};

defineExpose({ isShowDialog });
</script>

<style lang="scss" scoped></style>
